<template>
    <div class="card">
        <div class="pt-5 pr-5 pl-5">
            <h3>{{ item.title }}</h3>
        </div>
        <div>
            <p class="p-5">{{ item.content }}</p>
            <t-image class="pr-5 pl-5 border-rounded-lg" fit="contain"
                position="center" :src="item.image"></t-image>
            <p class="pr-5 pt-5 text-right"> {{ time }}</p>
        </div>
        <div class="card-footer">
            <t-button class="m-2.5" size="small" theme="primary"
                @click="pinglun">评论</t-button>
            <t-button class="m-2.5" size="small" theme="primary"
                @click="jubao">举报</t-button>
        </div>
    </div>
</template>

<script setup>
    import dayjs from 'dayjs'
    import { useStore } from '@/store/loginState'
    const loginState = useStore()
    const props = defineProps(['item'])

    const emit = defineEmits(["pinglun", "jubao"])

    const time = dayjs().format('YYYY-MM-DD')

    const pinglun = () => {
        if (loginState.logined) {
            emit('pinglun')
        } else {
            loginState.loginVisiableShow()
        }
    }
    const jubao = () => {
        if (loginState.logined) {
            emit('jubao', props.item.title)
        } else {
            loginState.loginVisiableShow()
        }
    }
</script>

<style scoped>
    .card {
        width: auto;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin: 20px;
    }

    .card-footer {
        /* background-color: #f8f9fa; */
        padding: 10px;
        /* border-top: 1px solid #ddd; */
        text-align: right;
    }


</style>